<template>
	<!-- 地块组件 -->
	<div class="land-card">

		<!-- 添加点击事件，在跳转时传递 land.id -->
		<img :src="land.image" alt="地块图片" class="land-image" @click="navigateToDetail(land.id)" />
		<!-- 其他内容 -->

		<div class="land-info">
			<h3>{{ land.name }}</h3>
			<p class="land-description">{{ land.description }}</p>
			<p class="land-price">价格：<span class="price">¥ {{ land.price }}</span>元起</p>
		</div>

		<button class="select-button" @click="navigateToDetail(land.id)">选择地块</button>

	</div>
</template>

<script setup>
	// 组件传输
	const props = defineProps({
		land: {
			type: Object,
			required: true,
		},
	});
	// 跳转获取到id 使用id查询的到全部的数据
	const navigateToDetail = (landId) => {
		uni.navigateTo({
			url: `/pages/land/Detail?id=${landId}`,
			fail: (err) => {
				console.error('Failed to navigate:', err);
			},
		});
	};
</script>

<style scoped>
	.land-card {
		border: 1px solid #ddd;
		border-radius: 8px;
		padding: 16px;
		width: 300px;
		/* 固定宽度 */
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		text-align: left;
		/* 左对齐文本 */
		background-color: #fff;
		margin: 16px auto;
		/* 增加上下的 margin 并水平居中 */
		position: relative;
		/* 为按钮的定位提供参考 */
	}

	.land-image {
		width: 100%;
		height: 150px;
		border-radius: 8px;
	}

	.land-info {
		margin-top: 12px;
	}

	.land-info h3 {
		margin: 0;
		font-size: 1.2em;
		color: #333;
	}

	.land-description {
		margin: 8px 0;
		color: #666;
		font-size: 0.9em;
	}

	.land-price {
		margin: 4px 0;
		font-size: 1em;
		color: #333;
	}

	.price {
		color: #ff0000;
		/* 红色价格 */
		font-weight: bold;
	}

	.select-button {
		position: absolute;
		bottom: 16px;
		/* 按钮距离底部 16px */
		right: 16px;
		/* 按钮距离右侧 16px */
		padding: 8px 16px;
		border: none;
		background-color: #28a745;
		/* 绿色按钮背景 */
		color: #fff;
		border-radius: 4px;
		cursor: pointer;
		font-size: 0.9em;
		transition: background-color 0.3s;
	}

	.select-button:hover {
		background-color: #218838;
		/* 鼠标悬停时变暗 */
	}
</style>